/* pages/devices/real.wxss */

.header{
  padding: 20px;
  background-color: #0077fe;
  color: #fff;
  display: flex;
  align-items: center;
  .img-logo{
    height: 90px;
    width: 90px;
    background-color: #fff;
    border-radius: 50%;
    background-size: cover;
    border:2px solid #fff;
  }
  .titles{
    padding-left: 15px;
    .t0{
      font-weight: bold;
      font-size: 1.5em;
      padding-bottom: 10px;
    }
    .t1{
      font-size: 1.0em;
      font-weight: bold;
    }
  }
}
.sec-list{
  padding:15px;
  margin-bottom:15px;
  .sec-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    //padding:10px 0;
    .sec-title{
      border-left: 3px solid #0077fe;
      padding-left:15px;
      font-weight: bold;
    }
  }
  .devData{
    margin: 15px 0;
    background-color: #fff;
    border-radius: 8px;
    .row-item{
      display: flex; 
      .icon{ 
        padding:15px;
        image{
          width: 24px; height: 24px;
        }
      }
      .content{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        .lab{
          color: #777;
        }
        .data{
          padding-right: 15px;
        }
      }
    }
  }
}

.sec-status{ 
  padding: 15px;
  .sec-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    //padding:10px 0;
    .sec-title{
      border-left: 3px solid #0077fe;
      padding-left:15px;
      font-weight: bold;
    }
  }
  .pan{
    display: grid;
    grid-template-columns: 50% 50%;
    padding:15px 0px;
    .item{
      .itemData{
        background-color: #fff;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        padding:15px;
        image{
          width: 60px;
          height:60px;
        }
        .data{
          flex: 1;
          text-align: right;
          .lab{
            color: #777;            
          }
          .value{
            font-size: 1.2em;
            font-weight: bold;
            padding:10px 0;
          }
          .value.on{
            color: #0ca110;
          }
          .value.off{
            color: #d81e06;
          }
        }
      }
    }
  }
  .photo{
    margin-bottom: 15px;
    position: relative;;
    .photoimg{
      width: 100%;
    }
    .tm{
      position: absolute;
      left: 15px;
      top: 15px;
      padding: 5px 15px;
      border-radius: 5px;
      background-color: rgba(0, 0, 0, 0.7);
      color: #fff;
    }
  }
  .devDatas{
    background-color: #fff;
    border-radius: 8px;
    .datas{
      display: flex;
      padding: 15px 0;
      .item{
        flex: 1;
        text-align: center;
        padding: 10px 0;
        .lab{
          color: #777;
          padding-top: 10px;
        }
        .value{
          font-weight: bold;
          display: flex;
          justify-content: space-evenly;
          align-items: flex-end;
          .v{
            font-size: 1.5em; 
          }
          .u{
            display: flex;
            font-weight: normal;
            .sup{
              margin-top: -10px;
            }
          }
        }
      }
    }
  }

}
.sec-control{ 
  padding: 15px;
  .sec-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    //padding:10px 0;
    .sec-title{
      border-left: 3px solid #0077fe;
      padding-left:15px;
      font-weight: bold;
    }
  }
  .pan{
    display: flex;
    justify-content: space-between;
    
    .item{
      width: 30%;      
      padding:15px 0;
      .btn{
        display: flex;
        justify-content:space-evenly;
        align-items: center;
        border:1px solid #0077fe;
        color: #0077fe;
        border-radius: 8px;
        background-color: #fff;
        padding: 10px 0;
        .icon{
          height: 20px;
          width:20px; 
        }
        .title{
        }
      }
      .btn:active{
        background-color: #f2f2f2; 
      }
    }
  }


}
